<template lang="pug">
.switch-lesson
  .modal-dialog.modal__overwrite.modal__lession-switch(role='document', v-show="show")
    .modal-content
      .modal-header
        h5.modal-title {{isModify ? '修改' : '新增'}}节点
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true', @click="close") ×
      .modal-body(v-if="item")
        form.form
          .form-group.row
            label.col-sm-3.col-form-label
              | 节点名：
            .col-sm-9
              input.form-control-plaintext(type="text", readonly="true", :value="item.catalogName")
          .form-group.row
            label.col-sm-3.col-form-label
              | 顺序：
            .col-sm-9
              select.form-control(v-model="select")
                option(v-for="item in list", :key="item.catalogId", :value="item.catalogId") {{item.catalogName}}之后
          .form-group.row
            label.col-sm-3.col-form-label
              | 名称：
            .col-sm-9
              input.form-control(type="text", v-model="input")
          .modal__btn__group
            button.btn.btn-sm.btn-outline-primary.btn__submit(@click="submit") 确定
            button.btn.btn-sm.btn-outline-primary(@click="close") 取消
          
</template>
<style lang="scss" scoped>
.form {
  margin-top: 210px;
  margin-bottom: 60px;
}
.modal__btn__group {
  margin-top: 200px;
}
</style>

<script>
import { mapState } from 'vuex'
import api from 'api/teacher/lession'
export default {
  data () {
    return {
      list: [],
      select: '',
      input: '',
      modifyValue: ''
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.getBrother()
      }
    },
    isModify (val) {
      if (val) {
        this.input = this.item.catalogName
      } else {
        this.input = ''
      }
    }
  },
  computed: mapState({
    show: state => state.modal.addNode,
    item: state => state.bridge.node.data,
    isModify: state => state.bridge.node.type === 'modify',
    selectItem () {
      return this.list.find(item => {
        return item.catalogId === this.select
      })
    }
  }),
  methods: {
    close () {
      this.$store.commit('hide', 'addNode')
    },
    getBrother () {
      api.getBrother(this.item.catalogId).then(response => {
        this.list = response.data.data
        if (this.list.length > 0) {
          this.select = this.list[0].catalogId
        }
      })
    },
    submit () {
      let xhr
      if (this.isModify) {
        xhr = api.putNode({
          id: this.item.bookId,
          bookId: this.item.bookId,
          isFolder: this.item.isFolder,
          catalogName: this.input,
          parentId: '',
          sortIndex: '',
          deleteFlag: 0
        })
      } else {
        xhr = api.postBook({
          bookId: this.item.bookId,
          isFolder: this.item.isFolder,
          catalogName: this.input,
          parentId: this.item.parentId,
          sortIndex: this.selectItem.sortIndex + 1
        })
      }
      xhr.then(() => {
        this.close()
      })
    }
  }
}
</script>